<template>
  <div id="app">
    <div v-if="!isLogin">
      <div>
        <flat-surface-shader
          class="shader"
          type="canvas"
          :light="{ ambient: '#2d3a4b', diffuse: '#1e7590', draw: false }"
          :mesh="{ segments: 4, slices: 4, width: 1.8, height: 1.8 }"
        >
          <div class="text">
            <div class="world">全国疫情可视化平台</div>
            <br />
            <br />
            <el-form class="denglu" :model="form" :rules="rules" ref="ruleForm">
              <el-form-item prop="username">
                <el-input
                  prefix-icon="el-icon-user-solid"
                  v-model="form.username"
                  placeholder="请输入用户名"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-form-item prop="password">
                  <el-input
                    :type="passw"
                    v-model="form.password"
                    autocomplete="off"
                    placeholder="请输入密码"
                    prefix-icon="el-icon-lock"
                  >
                    <i slot="suffix" :class="icon" @click="showPass"></i>
                  </el-input>
                </el-form-item>
                <br />
                <el-button
                  class="button"
                  type="primary"
                  @click="toLogin('ruleForm')"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </flat-surface-shader>
      </div>
    </div>
    <div v-else>
      <el-container>
        <el-header>
          <div class="header_left">
            <a href="#"><h4>全国疫情可视化平台</h4></a>
          </div>
          <div id="ziti">
            <span>防控疫情，人人有责！</span>
          </div>
          <div class="examplex">
            <vs-dropdown>
              <vs-button class="btn-drop" type="warning">Setting</vs-button>
              <vs-dropdown-menu>
                <vs-dropdown-item>
                  <vs-icon class="" color="orange" @click="toHome"
                    >Home</vs-icon
                  >
                </vs-dropdown-item>
                <vs-dropdown-item>
                  <vs-icon class="" color="orange" @click="toLogOut"
                    >LogOut</vs-icon
                  >
                </vs-dropdown-item>
              </vs-dropdown-menu>
            </vs-dropdown>
          </div>
          <iframe
            class="weather"
            width="250"
            scrolling="no"
            height="60"
            frameborder="0"
            allowtransparency="true"
            src="https://i.tianqi.com?c=code&id=35&icon=2&site=34"
          ></iframe>
          <!-- <el-radio-group v-model="isCollapse">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group> -->
        </el-header>
        <el-container>
          <el-aside
            :width="kuandu"
            @mouseenter.native="collapseOpen"
            @mouseleave.native="collapseClose"
          >
            <el-menu
              :collapse-transition="true"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              :collapse="isCollapse"
              :default-active="active"
              router
            >
              <el-menu-item index="/">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
              </el-menu-item>
              <el-menu-item index="/yimiao">
                <i class="el-icon-plus"></i>
                <span slot="title">疫苗接种</span>
              </el-menu-item>
              <el-menu-item index="/Symptom">
                <i class="el-icon-first-aid-kit"></i>
                <span slot="title">症状及途径</span>
              </el-menu-item>
              <el-menu-item index="/map">
                <i class="el-icon-position"></i>
                <span slot="title">疫情地图</span>
              </el-menu-item>
              <el-menu-item index="/current">
                <i class="el-icon-alarm-clock"></i>
                <span slot="title">实时疫情</span>
              </el-menu-item>
              <el-menu-item index="/dataStatic">
                <i class="el-icon-menu"></i>
                <span slot="title">数据统计</span>
              </el-menu-item>
              <el-menu-item index="/hosp">
                <i class="el-icon-office-building"></i>
                <span slot="title">定点医院</span>
              </el-menu-item>
              <el-menu-item index="/Prevention">
                <i class="el-icon-umbrella"></i>
                <span slot="title">疫情预防</span>
              </el-menu-item>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-user"></i>
                  <span>基础配置</span>
                </template>

                <el-menu-item index="/usercontrol">用户管理</el-menu-item>

                <el-menu-item index="/Rolemanagement"> 角色管理 </el-menu-item>
                <el-menu-item index="/Authoritymanagement">
                  权限设置
                </el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-s-tools"></i>
                  <span>疫情管理</span>
                </template>

                <el-menu-item index="/hospital">定点医院</el-menu-item>

                <el-menu-item index="/infoList"> 资讯分类 </el-menu-item>
                <el-menu-item index="/Article"> 新闻资讯 </el-menu-item>
                <el-menu-item index="/Time"> 疫情轴 </el-menu-item>
              </el-submenu>

              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-notebook-1"></i>
                  <span>疫情数据</span>
                </template>
                <el-menu-item index="/list">
                  <span slot="title"> 数据列表 </span>
                </el-menu-item>
                <el-menu-item index="/up">
                  <span slot="title"> 数据上报 </span>
                </el-menu-item>
              </el-submenu>
              <el-menu-item index="/user">
                <i class="el-icon-user"></i>
                <span slot="title">用户信息预览</span>
              </el-menu-item>
              <el-menu-item index="/jiankang">
                <i class="el-icon-s-grid"></i>
                <span slot="title">健康码申请</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <div>
              <router-view> </router-view>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import axios from "./utils/request";
import HelloWorld from "./components/HelloWorld.vue";

import Vuesax from "vuesax";
import "vuesax/dist/vuesax.css"; //Vuesax styles
Vue.use(Vuesax, {
  // options here
});

import Vue from "vue";
import FlatSurfaceShader from "vue-flat-surface-shader";
Vue.use(FlatSurfaceShader);
export default {
  data() {
    return {
      kuandu: "200",
      // collapseBtnClick: false,
      isCollapse: true,
      // isCollapse: false,
      //用于改变Input类型
      passw: "password",
      //用于更换Input中的图标
      icon: "el-input__icon el-icon-view",
      active: "/",
      isLogin: sessionStorage.getItem("token"),
      getItem: "token",
      form: {},
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  name: "app",

  created() {
    this.active = location.pathname;
  },
  watch: {
    $route: function (route) {
      console.log(route);
      this.active = route.path;
    },
  },

  methods: {
    toLogOut() {
      this.isLogin = false;
      this.sessionStorage.removeItem("token");
      this.sessionStorage.clear();
      this.form = {};
    },
    toHome() {
      //指定跳转地址
      this.$router.push("/");
    },
    //密码的隐藏和显示
    showPass() {
      //点击图标是密码隐藏或显示
      if (this.passw == "text") {
        this.passw = "password";
        //更换图标
        this.icon = "el-input__icon el-icon-view";
      } else {
        this.passw = "text";
        this.icon = "el-input__icon el-icon-loading";
      }
    },
    collapseOpen() {
      // if (this.collapseBtnClick) return;
      this.isCollapse = false;
    },
    collapseClose() {
      // if (this.collapseBtnClick) return;
      this.isCollapse = true;
    },
    //点击确定按钮
    toLogin(formName) {
      this.$refs[formName].validate(async (valid) => {
        //校验通过
        if (valid) {
          let res = await axios.post("/user/login", this.form);
          if (res.status == 200) {
            //存token到sessionStorage中
            sessionStorage.setItem("token", res.data.token);
            this.isLogin = true;
          } else {
            //提示登录失败信息
            this.$notify.error({
              title: "错误",
              message: "res.statusText",
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // tosou() {
    //   if (isCollapse == false) {
    //     return (isCollapse = true);
    //   } else {
    //     return (isCollapse = false);
    //   }
    // },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style>
.examplex {
  float: right;
  /* margin-right: 20px; */
}
.btnx {
  margin-left: 10px !important;
  border-radius: 5px 0px 0px 5px;
  width: 50px;
}
.btn-drop {
  border-radius: 5px 5px 5px 5px;
  font-size: 20px;
  color: orangered;
  /* font-family: "ALGERIAN"; */
  font-family: "Cooper Black";
}
.button {
  height: 45px;
  width: 450px;
  color: #2cb5ac;
}
.el-button--primary {
  background-color: #2cb5ac !important;
  border-color: #2cb5ac !important;
}
.world {
  font-size: 40px;
  font-family: "楷体";
  text-align: center;
  color: #fff;
}
.text {
  width: 450px;
  position: absolute;
  left: calc((100% - 450px) / 2);
  top: 170px;
}
.shader {
  position: relative;
}
html,
body {
  margin: 0;
  padding: 0;
}
.shader {
  width: 100vw;
  height: 100vh;
}
.el-table .warning-row {
  background: oldlace;
}
#ziti {
  width: 500px;
  height: 60px;
  /* background-color: blueviolet; */
  display: inline-block;
  margin-left: 349px;
  font-family: "华文隶书";
  font-size: 50px;
  color: darkturquoise;
}
.el-table .success-row {
  background: #f0f9eb;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
}
.el-header {
  color: #333;
  /* text-align: center; */
  line-height: 60px;
}

.el-aside {
  /* background-color: #d3dce6; */
  color: #333;
  /* text-align: center; */
  /* line-height: 200px; */
  height: calc(100vh - 60px);
  min-height: 500px;
}

.el-main {
  /* background-color: #e9eef3; */
  background-color: rgba(255, 165, 0, 0.1);
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
  height: calc(100vh - 60px);
  min-height: 500px;
  padding: 10px !important;
}
.el-main > div {
  background-color: #fff;

  border-radius: 10px;
  padding: 20px;
}
* {
  margin: 0;
}
.kuangjia {
  float: right !important;
  margin-top: 15px;
  margin-right: 130px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
a {
  text-decoration: none;
  color: #fff;
}
h4 {
  margin-left: 0;
}
.header_left {
  background-color: #2cb5ac;
  width: 200px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin-left: 0;
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
}
.el-header {
  padding: 0px 200px !important;
}
.weather {
  float: right;
}
</style>
